<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+/Edge */
            user-select: none; /* Standard syntax */
        }

        body {
            /*background-color: transparent;*/
            /*background-color: #987824;*/
        }
    </style>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="main" style="width: 100%;height:100vh;"></div>
<script type="text/javascript">

    document.oncontextmenu = function () {
        return false;
    }

    let nameArr = [];
    let dataIndex = -1;

    let myChart = echarts.init(document.getElementById('main'), null,
        {
            renderer: 'svg',
            locale: 'ZH'
        });

    function getOption(parse) {
        let data = {};
        if (!parse) {
            // data.data1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25];
            // data.data2 = [636, 45, 353, 86, 348, 325, 196, 114, 403, 1628, 1293, 1291, 1050, 938, 869, 1599, 1812, 1795, 1031, 1448, 1448, 1633, 1392, -1681, 1443];
            // data.data3 = [636, 45, 353, 86, 348, 325, 196, 114, 403, 1628, 1293, 1291, 1050, 938, 869, 1599, 1812, 1795, 1031, 1448, 1448, 1633, 1392, -1681, 1443];
            data.data1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
            data.data2 = [0, 100, 100, 800, -300, -250, -200, 100, 150, 600];
            data.data3 = ['着法1', '着法2', '着法3', '着法4', '着法5', '着法6', '着法7', '着法8', '着法9', '着法10'];
            data.min = -2000;
            data.max = 2000;
            data.desc = '南方队赵鑫鑫先胜北方队王天一';
            data.title = '南北对抗赛';
            nameArr = data.data3;
        } else {
            data = parse;
            nameArr = data.data3;
        }
        return {
            silent: false,
            title: {
                // text: data.desc,
                textStyle: {
                    color: '#fff',
                },
                subtext: data.title + ' ' + data.desc,
                subtextStyle: {
                    color: '#fff',
                },
                axisLine: {
                    show: false,
                    onZero: false,
                    lineStyle: {
                        color: '#783409'
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                extraCssText: 'padding:5px 10px;background-color: #0BBF8Eff;border:none;border-radius:2px;',
                formatter: function (params) {
                    let param = params[0];
                    let html = '';
                    html += "<div style='color: #fff;'>"
                    html += (param.dataIndex + 1) + '/' + nameArr.length + ' ';
                    html += nameArr[param.dataIndex] + ' ';
                    if (param.data >= 0) {
                        html += ' 红优' + param.data + '</span>';
                    } else {
                        html += ' 黑优<span style="">' + (0 - param.data) + '</span>';
                    }
                    html += "</div>"
                    return html;
                }
            },
            grid: {
                top: '5%',
                bottom: '0%',
                left: '0%',
                right: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: data.data1,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,0.5)",
                    },
                },
            },
            yAxis: {
                type: 'value',
                min: parse.min - 100,
                max: parse.max + 100,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,0.5)",
                    },
                    formatter: function (value, index) {
                        return value;
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.9)",
                    },
                    onZero: false
                },
            },
            series: [
                {
                    data: data.data2,
                    symbol: 'none',// 不显示底部圆点
                    connectNulls: false,// 是否连接空数据
                    smooth: false,
                    type: 'line',
                    silent: false,
                    lineStyle: {
                        color: '#fff'
                    },
                }
            ]
        };
    }

    function showResult(s) {
        myChart.resize();
        const parse = JSON.parse(s);
        myChart.setOption(getOption(parse));
    }

    function setHighLight(idx) {
        console.log('高亮');
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: idx
        });
    }

    function setWidth(width) {
        document.getElementById('main').style.width = width;
    }

    myChart.setOption(getOption(false));

    myChart.getZr().on('click', function (params) {
        java.selectMatchTableView(dataIndex);
    });

    myChart.on('highlight', (params) => {
        dataIndex = params.batch[0].dataIndex;
    });
</script>
</body>
</html>